<template>
  <div>
    <el-input v-if="showFilter" v-model="filterValue" :placeholder="placeholder" />
    <div class="panel-tile-item-group">
      <tile
        v-for="(item, index) in filtedData"
        :key="index"
        class="panel-tile-item"
        :data="item"
        @click="$emit('click',$event)"
        @dblclick="$emit('dblclick',$event)"
        @contextmenu="$emit('contextmenu',$event)"
      />
    </div>
  </div>
</template>
<script>
import { filterList } from '@service/utilTool.js'
export default {
  name: 'PanelTile',
  components: {
    // NodeTile: () => import('@components/NodeTile.vue')
  },
  props: {
    data: { // tree list data set
      type: Array,
      required: true,
      default: () => []
    },
    showFilter: { // flag of filter input display;true: default,show;false: hide
      type: Boolean,
      required: false,
      default: true
    },
    filter: { // filter condition
      type: String,
      required: false,
      default: null
    },
    placeholder: { // filter placeholder
      type: String,
      required: false,
      default: '输入关键字'
    }
  },
  data() {
    return {
      filterValue: this.filter
    }
  },
  computed: {
    filtedData() {
      return filterList(this.data, this.filterValue, this.treeTemplate)
    }
  }
}
</script>
<style scoped>
.panel-tile-item-group {
  width: 100%;
  display: flex;
  flex-flow: row wrap;
}
.panel-tile-item {
  width: calc(25% - 1rem);
  padding: .5rem;
  box-sizing: border-box;
}
</style>
